<script language="javascript" src="modules/VotePetition/pnajax/ajax_form_house_no.js"></script>
<script type="text/javascript">
    function validateForm(form) {
      //Check pro_id
      var pro_id = document.getElementById("form_pro_id_");
      if (pro_id.value == '0') {
          alert("กรุณาเลือกจังหวัด");
          pro_id.style.borderStyle = "solid";
          pro_id.style.borderColor = "#FF0000";
          pro_id.style.borderWidth = "1px";
          pro_id.focus();
          return false;
      }else{
          pro_id.style.borderStyle = "solid";
          pro_id.style.borderColor = "#00CC00";
          pro_id.style.borderWidth = "1px";
      }
      
      var dis_id = document.getElementById("form_dis_id_");
      if (dis_id.value == '0') {
          alert("กรุณาเลือกอำเภอ");
          dis_id.style.borderStyle = "solid";
          dis_id.style.borderColor = "#FF0000";
          dis_id.style.borderWidth = "1px";
          dis_id.focus();
          return false;
      }else{
          dis_id.style.borderStyle = "solid";
          dis_id.style.borderColor = "#00CC00";
          dis_id.style.borderWidth = "1px";
      }
      
      var tam_id = document.getElementById("form_tam_id_");
      if (tam_id.value == '0') {
          alert("กรุณาเลือกตำบล");
          tam_id.style.borderStyle = "solid";
          tam_id.style.borderColor = "#FF0000";
          tam_id.style.borderWidth = "1px";
          tam_id.focus();
          return false;
      }else{
          tam_id.style.borderStyle = "solid";
          tam_id.style.borderColor = "#00CC00";
          tam_id.style.borderWidth = "1px";
      }
      
      
      //Check category
      var vil_id = document.getElementById("form_vil_id_");
      if(vil_id){
        if (vil_id.value == '0') {
            alert("กรุณาเลือกหมู่บ้าน");
            vil_id.style.borderStyle = "solid";
            vil_id.style.borderColor = "#FF0000";
            vil_id.style.borderWidth = "1px";
            vil_id.focus();
            return false;
        }else{
            vil_id.style.borderStyle = "solid";
            vil_id.style.borderColor = "#00CC00";
            vil_id.style.borderWidth = "1px";
        }
      }
/*
      //Check party
      var party = document.getElementById("form_par_id_");
      if (party.value == '0') {
          alert("กรุณาเลือกพรรค ");
          party.style.borderStyle = "solid";
          party.style.borderColor = "#FF0000";
          party.style.borderWidth = "1px";
          party.focus();
          return false;
      }else{
          party.style.borderStyle = "solid";
          party.style.borderColor = "#00CC00";
          party.style.borderWidth = "1px";
      }
*/
      //Check house_no
      var house_no = document.getElementById("no");
      if (house_no.value == '') {
          alert("กรุณาบอกบ้านเลขที่ ");
          house_no.style.borderStyle = "solid";
          house_no.style.borderColor = "#FF0000";
          house_no.style.borderWidth = "1px";
          house_no.focus();
          return false;
      }else{
          house_no.style.borderStyle = "solid";
          house_no.style.borderColor = "#00CC00";
          house_no.style.borderWidth = "1px";
      }

      //Check title
      var title = document.getElementById("title");
      if (title.value == '') {
          alert("กรุณากรอกหัวข้อปัญหา");
          title.style.borderStyle = "solid";
          title.style.borderColor = "#FF0000";
          title.style.borderWidth = "1px";
          title.focus();
          return false;
      }else{
          title.style.borderStyle = "solid";
          title.style.borderColor = "#00CC00";
          title.style.borderWidth = "1px";
      }
      
      //Check latitude
      var latitude = document.getElementById("latitude");
      if (latitude.value == '') {
          alert("Please enter value.");
          latitude.style.borderStyle = "solid";
          latitude.style.borderColor = "#FF0000";
          latitude.style.borderWidth = "1px";
          latitude.focus();
          return false;
      }else{
          document.getElementById('error-title').innerHTML = "";
      }

      //Check longitude
      var longitude = document.getElementById("longitude");
      if (longitude.value == '') {
          alert("Please enter value.");
          longitude.style.borderStyle = "solid";
          longitude.style.borderColor = "#FF0000";
          longitude.style.borderWidth = "1px";
          longitude.focus();
          return false;
      }else{
          document.getElementById('error-longitude').innerHTML = "";
      }

    }
</script>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
  var geocoder = new google.maps.Geocoder();

  function geocodePosition(pos) {
    geocoder.geocode({
      latLng: pos
    }, function(responses) {
      if (responses && responses.length > 0) {
        updateMarkerAddress(responses[0].formatted_address);
      } else {
        updateMarkerAddress('Cannot determine address at this location.');
      }
    });
  }

  function updateMarkerStatus(str) {
    document.getElementById('markerStatus').innerHTML = str;
  }

  function updateMarkerPosition(latLng) {

    document.getElementById("latitude").value = latLng.lat();
    document.getElementById("longitude").value = latLng.lng();
    document.getElementById('info').innerHTML = [
      latLng.lat(),
      latLng.lng()
    ].join(', ');


  }

  function updateMarkerAddress(str) {
    document.getElementById('address').innerHTML = str;
  }

  function initialize() {
    <!--[if $form.latitude && $form.longitude]-->
     var latLng = new google.maps.LatLng(<!--[$form.latitude]-->, <!--[$form.longitude]-->);
    <!--[else]-->
     var latLng = new google.maps.LatLng(18.23561180974427,100.16967718749993);
    <!--[/if]-->

    var map = new google.maps.Map(document.getElementById('mapCanvas'), {
        scrollwheel: false,
      zoom: 9,
      center: latLng,
      mapTypeId: google.maps.MapTypeId.HYBRID
    });
    var marker = new google.maps.Marker({
      position: latLng,
      title: '<!--[$form.name]-->',
      map: map,
      draggable: true
    });
    
    // Update current position info.
    updateMarkerPosition(latLng);
    geocodePosition(latLng);
    
    // Add dragging event listeners.
    google.maps.event.addListener(marker, 'dragstart', function() {
      updateMarkerAddress('Dragging...');
    });
    
    google.maps.event.addListener(marker, 'drag', function() {
      updateMarkerStatus('Dragging...');
      updateMarkerPosition(marker.getPosition());
    });
    
    google.maps.event.addListener(marker, 'dragend', function() {
      updateMarkerStatus('Drag ended');
      geocodePosition(marker.getPosition());
    });
  }

  // Onload handler to fire off the app.
  google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<TABLE width="100%">
  <TR>
    <TD valign="top" width="100%">
        <fieldset>
        <legend>&nbsp;Map information&nbsp;</legend>
        <body>
          <style>
          #mapCanvas {
            width: 100%;
            height: 600px;
            float: left;
          }
          #infoPanel {
            float: left;
            margin-left: 10px;
          }
          #infoPanel div {
            margin-bottom: 5px;
          }
          </style>
          <div id="mapCanvas"></div>
        </fieldset>
    </TD>
  </TR>
</TABLE>
aaaa

<TABLE width="100%" >
  <TR>
    <TD valign="top" border="1">
        <fieldset>
          <legend>&nbsp;แบบสำรวจข้อมูล&nbsp;</legend>
            <form id='form' 
                  class='form' 
                  action="<!--[pnmodurl modname='VotePetition' type='userform' func='submit' ctrl='HouseNo']-->" 
                  method="post" 
                  onsubmit="return validateForm(this)"
            >
                <input type="hidden" name="form[id]" value="<!--[$smarty.request.id]-->" />
                <TABLE width='100%' border="0">

                  <tr>
                    <td>
                      <select name="form[title]">
                        <option value="นาย" selected>
                        <option value="นาง">
                        <option value="นางสาว">
                        <option value="อื่นๆ">
                      </select>
                    </td>
                  </tr>

                    <TR>
                      <TD class='td-label' align="left">
                        <B>จังหวัด&nbsp;:&nbsp;</B>
                      </TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <!--[selector_object_array_ex
                              modname="VotePetition" 
                              class="Province" 
                              field="id" 
                              displayField="name"  
                              name="form[pro_id]" 
                              selectedValue=$form.pro_id 
                              sort="pro_name"
                              onChange="getDistrictByProvinceID()"
                              onClick="getDistrictByProvinceID()"
                              defaultValue="0"
                              defaultText="--------- กรุณาเลือก ---------"
                        ]-->
                        <FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                      </TD>
                    </TR>
                    <TR>
                      <TD class='td-label' align="left">
                        <B>อำเภอ&nbsp;:&nbsp;</B>
                      </TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <span id="form_district">
                            <!--[if (isset($smarty.request.form.dis_id) || $smarty.request.form.dis_id == 0) && $smarty.request.form.pro_id]-->
                              <!--[selector_object_array_ex modname="VotePetition" 
                                      class="District" 
                                      field="id" 
                                      displayField="name"  
                                      name="form[dis_id]" 
                                      sort="dis_name"
                                      selectedValue=$smarty.request.form.dis_id
                                      queryField = dis_pro_id
                                      queryValue = $smarty.request.form.pro_id
                                      onChange="getTambonByDistrictID()"
                              ]-->
                            <!--[elseif $form.dis_id && $form.pro_id]-->
                              <!--[selector_object_array_ex modname="VotePetition" 
                                      class="District" 
                                      field="id" 
                                      displayField="name"  
                                      name="form[dis_id]" 
                                      sort="dis_name"
                                      selectedValue=$form.pro_id
                                      queryField = dis_pro_id
                                      queryValue = $form.pro_id
                                      onChange="getTambonByDistrictID()"
                              ]-->
                            <!--[else]-->
                            -
                            <!--[/if]-->
                        </span>
                        <div id='error-name'></div>
                      </TD>
                    </TR>
                    <TR>
                      <TD class='td-label' align="left">
                        <B>ตำบล&nbsp;:&nbsp;</B>
                      </TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <span id="form_tambon">
                            <!--[if (isset($smarty.request.form.tam_id) || $smarty.request.form.tam_id == 0) && $smarty.request.form.tam_id]-->
                              <!--[selector_object_array_ex 
                                      modname="VotePetition" 
                                      class="Tambon" 
                                      field="id" 
                                      displayField="name"  
                                      name="form[tam_id]" 
                                      sort="tam_name"
                                      selectedValue=$smarty.request.form.tam_id
                                      queryField = dis_pro_id
                                      queryValue = $smarty.request.form.tam_id
                              ]-->
                            <!--[elseif $form.dis_id && $form.pro_id && $form.tam_id]-->
                              <!--[selector_object_array_ex 
                                      modname="VotePetition" 
                                      class="Tambon" 
                                      field="id" 
                                      displayField="name"  
                                      name="form[tam_id]" 
                                      sort="tam_name"
                                      selectedValue=$form.tam_id
                                      queryField = tam_dis_id
                                      queryValue = $form.dis_id
                              ]-->
                            <!--[else]-->
                            -
                            <!--[/if]-->
                        </span>
                      </TD>
                    </TR>
                    <TR>
                      <TD class='td-label' align="left">
                        <B>หมู่บ้าน&nbsp;:&nbsp;</B>
                      </TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <span id="form_village">
                            <!--[if (isset($smarty.request.form.tam_id) || $smarty.request.form.tam_id == 0) && $smarty.request.form.tam_id]-->
                              <!--[selector_object_array_ex 
                                      modname="VotePetition" 
                                      class="Village" 
                                      field="id" 
                                      displayField="moo"  
                                      name="form[vil_id]" 
                                      sort="vil_moo"
                                      selectedValue=$smarty.request.form.vil_id
                                      queryField = vil_tam_id
                                      queryValue = $smarty.request.form.tam_id
                              ]-->
                            <!--[elseif $form.dis_id]-->
                              <!--[selector_object_array_ex 
                                      modname="VotePetition" 
                                      class="Village" 
                                      field="id" 
                                      displayField="moo"  
                                      name="form[vil_id]" 
                                      sort="vil_moo"
                                      selectedValue=$form.vil_id
                                      queryField = vil_tam_id
                                      queryValue = $form.tam_id
                              ]-->
                            <!--[else]-->
                            -
                            <!--[/if]-->
                        </span>
                        <div id='error-name'></div>
                      </TD>
                    </TR>
                    <TR>
                      <TD class='td-label' align="left">
                        <B>บ้านเลขที่&nbsp;:&nbsp;</B>
                      </TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <input type="text" name="form[no]" id="no">
                        <FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <div id='error-name'></div>
                      </TD>
                    </TR>
                    <TR>
                      <TD class='td-label' align="left">
                        <B>หัวข้อ&nbsp;:&nbsp;</B>
                      </TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <input type="text" name="form[title]" id="title" value="<!--[$form.title]-->">
                        <FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <div id='error-title'></div>
                      </TD>
                    </TR>
                    <TR>
                      <TD class='td-label' align="left">
                        <B>หมายเหตุ&nbsp;:&nbsp;</B>
                      </TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <textarea name="form[comment]" rows="5" cols="22"><!--[$form.comment]--></textarea>
                      </TD>
                    </TR>
                    <TR>
                      <TD class='td-label' align="left"><B>latitude&nbsp;:&nbsp;</B></TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <input id="latitude" 
                              type="text" 
                              name="form[latitude]" 
                              value="<!--[$form.latitude]-->" 
                              title="latitude" 
                              class="required" 
                              size="25"  
                        />
                        <FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <span id='error-latitude'></span>
                      </TD>
                    </TR>
                    <TR>
                        <TD class='td-label' align="left"><B>longitude&nbsp;:&nbsp;</B></TD>
                    </TR>
                    <TR>
                      <TD align="left">
                        <input id="longitude" 
                              type="text" 
                              name="form[longitude]" 
                              value="<!--[$form.longitude]-->" 
                              title="longitude" 
                              class="required" 
                              size="25" 
                        />
                        <FONT SIZE="2" COLOR="#FF0000">&nbsp;*</FONT>
                        <span id='error-longitude'></span>
                      </TD>
                    </TR>
                    <TR>
                      <TD align="left" width="100%">
                        <INPUT TYPE="submit" value="submit">
                        <input type="button" 
                                name="Cancel" 
                                value="Cancel" 
                                onclick="window.location = '<!--[pnmodurl modname='VotePetition' type='admin' func='list' ctrl='Province']-->' " 
                        />
                      </TD>
                    </TR>
                </TABLE>
            </form><BR>
          <hr>
          <div id="infoPanel">
            <b>Marker status:</b>
            <div id="markerStatus"><i>Click and drag the marker.</i></div>
            <b>Current position:</b>
            <div id="info"></div>
            <b>Closest matching address:</b>
            <div id="address"></div>
          </div>
        </body>
        </html>
        </fieldset><BR>
    </TD>
  </TR>
</TABLE>

